<template>
  <div class="content">
    <el-tabs v-model="activeName" type="card">
      <!-- 流水概括 -->
      <el-tab-pane label="流水概括" name="first">
        <div style="min-width:1366px">
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>账户资金余额</span>
            </div>
            <span>￥{{ Deposit }}</span>
          </el-card>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>账户信用余额</span>
            </div>
            <span>￥{{ Credit_amount }}</span>
          </el-card>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>账户信用额度</span>
            </div>
            <span>￥{{ set_credit_amount }}</span>
          </el-card>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>商户资金债务</span>
            </div>
            <span>￥{{ debt }}</span>
          </el-card>
        </div>
      </el-tab-pane>
      <!-- 资金流水 -->
      <el-tab-pane label="资金流水" name="second">
        <!-- 筛选区域 -->
        <div class="herder" style="min-width:900px">
          <div style="margin-bottom:22px">
            <span>交易流水号</span>
            <el-input v-model="params.uid" placeholder="请输入交易流水号筛选" />
          </div>
          <div style="margin-bottom:22px">
            <span>关联订单</span>
            <el-input v-model="params.order_uid" placeholder="请输入订单编号筛选" />
          </div>
          <div style="margin-bottom:22px">
            <span>收支类型</span>
            <el-select v-model="params.class" placeholder="请选择" style="margin-left: 24px;">
              <el-option v-for="(val, key, i) in incomeOptions" :key="i" :label="val" :value="key" />
            </el-select>
          </div>
          <div style="margin-bottom:22px">
            <span>交易类型</span>
            <el-select v-model="params.type" placeholder="请选择" style="margin-left:24px;">
              <el-option
                v-for="(val, key, i) in transactionOptions"
                :key="i"
                :label="val"
                :value="key"
              />
            </el-select>
          </div>
          <div>
            <span>交易渠道</span>
            <el-select
              v-model="params.channel"
              placeholder="请选择"
              style="margin-left: 24px;text-indent:1em;"
            >
              <el-option
                v-for="(val, key, i) in channelOptions"
                :key="i"
                :label="val"
                :value="key"
              />
            </el-select>
          </div>
          <div>
            <span>流水状态</span>
            <el-select v-model="params.status" placeholder="请选择" style="margin-left:24px;">
              <el-option v-for="(val, key, i) in fundsOptions" :key="i" :label="val" :value="key" />
            </el-select>
          </div>
          <div class="time">
            <span>发生时间</span>
            <el-date-picker
              v-model="date"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="选择时间"
              :default-time="['12:00:00']"
              class="picker"
            />
          </div>
          <div class="reset">
            <el-button type="primary" plain @click="newTurnoverList">筛选</el-button>
            <el-button type="primary" plain style="margin-left:24px;" circle @click="reload">
              <i class="el-icon-refresh-right" />
            </el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="TurnoverList"
          height="60.5vh"
          style="width: 100%;"
          :header-cell-style="{color:'black'}"
        >
          <el-table-column min-width="140px" label="交易流水号">
            <template v-slot="scope">{{ scope.row.funds_uid }}</template>
          </el-table-column>
          <el-table-column min-width="140px" prop="order_uid" label="关联订单" />
          <el-table-column min-width="70px" prop="payment_class" label="收支类型">
            <template v-slot="scope">
              <span>{{ incomeOptions[scope.row.payment_class] }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="70px" label="交易类型">
            <template v-slot="scope">
              <span>{{ transactionOptions[scope.row.payment_type] }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="70px" prop="payment_channel" label="交易渠道">
            <template v-slot="scope">
              <span>{{ channelOptions[scope.row.payment_channel] }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120px" label="变动资金">
            <template v-slot="scope">
              <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.payment_price)" placement="top-start">
                <span> ￥{{ scope.row.payment_price }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column min-width="120px" label="余额">
            <template v-slot="scope">
              <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.after_funds)" placement="top-start">
                <span> ￥{{ scope.row.after_funds }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column width="140px" prop="comment" label="交易备注">
            <template v-slot="scope">
              <tool :content="scope.row.comment">
                {{ scope.row.comment }}
              </tool>
            </template>
          </el-table-column>
          <el-table-column min-width="70px" label="流水状态">
            <template v-slot="scope">
              <span>{{ fundsOptions[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="140px" prop="created_at" label="发生时间" />
        </el-table>
        <!-- 分页区域 -->
        <div class="dingwei">
          <el-pagination
            :current-page="params.page"
            :page-sizes="$arrays.tableSize"
            :page-size="params.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getDepositAndCredit_amount, getTurnoverList } from '@/api/capital'
import tool from '@/components/tool'
export default {
  name: 'Select',
  components: { tool },
  filters: {
    fundsFormat(uid) {
      uid = uid.substr(1)
      return uid
    }
  },
  data() {
    return {
      params: {
        page: 1,
        limit: 20,
        order_uid: '',
        uid: '',
        class: '',
        status: '',
        type: '',
        channel: '',
        start_at: '',
        end_at: ''
      },
      total: 0,
      // 余额
      Deposit: '',
      // 信用额度,
      set_credit_amount: 0,
      Credit_amount: '',
      debt: '',
      activeName: 'first',
      TurnoverList: [],
      date: '',
      options: [],
      incomeOptions: { '': '全部', IN: '收入', OUT: '支出' },
      transactionOptions: {
        '': '全部',
        CONSUME: '消费',
        SAVING: '充值',
        REFUND: '退款',
        PAYBACK: '佣金收入',
        PAYBACK_RECALL: '佣金退还'
      },
      channelOptions: {
        '': '全部',
        DEPOSIT: '余额',
        CREDIT_AMOUNT: '信用余额',
        DEBT: '债务'
      },
      fundsOptions: { '': '全部', NORMAL: '正常', CANCEL: '取消' }
    }
  },
  created() {
    this.getDepositAndCredit_amount()
    this.getTurnoverList()
  },
  methods: {
    getDepositAndCredit_amount() {
      getDepositAndCredit_amount().then((res) => {
        this.Deposit = res.data.data.deposit
        this.Credit_amount = res.data.data.credit_amount
        this.set_credit_amount = res.data.data.set_credit_amount
        this.debt = res.data.data.debt
      })
    },
    getTurnoverList() {
      getTurnoverList(this.params).then((res) => {
        this.TurnoverList = res.data.data.data
        this.total = res.data.data.total
      })
    },
    handleSizeChange(newPageSize) {
      this.params.limit = newPageSize
      this.getTurnoverList()
    },
    handleCurrentChange(newPage) {
      this.params.page = newPage
      this.getTurnoverList()
    },
    reload() {
      this.params = {
        page: 1,
        limit: 20,
        order_uid: '',
        uid: '',
        class: '',
        status: '',
        type: '',
        channel: '',
        start_at: '',
        end_at: ''
      }
      this.date = ''
      this.getDepositAndCredit_amount()
      this.getTurnoverList()
    },
    newTurnoverList() {
      if (this.date.length === 0) {
        this.getTurnoverList()
      } else {
        var star = new Date(this.date[0])
        var end = new Date(this.date[1])
        this.params.start_at =
          star.getFullYear() +
          '-' +
          (star.getMonth() + 1) +
          '-' +
          star.getDate() +
          ' ' +
          star.getHours() +
          ':' +
          star.getMinutes() +
          ':' +
          star.getSeconds()
        this.params.end_at =
          end.getFullYear() +
          '-' +
          (end.getMonth() + 1) +
          '-' +
          end.getDate() +
          ' ' +
          end.getHours() +
          ':' +
          end.getMinutes() +
          ':' +
          end.getSeconds()
        this.getTurnoverList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
  .fontColor {
    color: #2797fa;
  }
  .flowingWater {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #dcdfe6;
    width: 6%;
    height: 5vh;
    line-height: 5vh;
    text-align: center;
  }
  .box-card {
    display: inline-block;
    width: calc(25% - 40px);
    margin-right: 20px;
     margin-left: 20px;
    min-width: 300px;
    .clearfix {
      span {
        text-align: left;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
      }
    }
    span {
      text-align: center;
      font-weight: bold;
      display: block;
      margin-top: 30px;
      font-size: 36px;
      margin-bottom: 30px;
    }
  }
}
.herder {
  width: 100%;
  margin-bottom: 40px;
  div {
    // margin-top: 22px;
    display: inline-block;
    width: 25%;
    span {
      color: black;
      font-weight: bold;
      font-size: 16px;
    }
    .el-input {
      margin-left: 24px;
      width: calc(100% - 128px);
    }
    .el-select {
      width: calc(100% - 128px);
      // @media screen and (max-width: 1919px) {
      //   width: 15vw;
      // }
      // margin-left: 0px;
    }
    .picker {
      margin-left: 24px;
      // width: 325px;
      width: calc(100% - 128px);
    }
  }
  @media screen and (max-width: 1802px) {
    .time {
      width: 30%;
    }
    .reset {
      width: 20%;
    }
  }
  @media screen and (max-width: 1541px) {
    .time {
      width: 35%;
    }
    .reset {
      width: 15%;
    }
  }
}

.dingwei {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100%;
  padding-bottom: 50px;
  padding-top: 40px;
}
</style>
<style>
.el-table::before {
  height: 0px !important;
}
.el-tabs__header {
  margin: 0 0 40px !important;
}
</style>
